<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script>
 $(function() {
        var initialLocaleCode = 'zh-cn';
        $('#calendar').fullCalendar({  
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'listMonth'
            },
            defaultView:'listMonth',

            locale: initialLocaleCode,
            buttonIcons: false, // show the prev/next text
            weekNumbers: false,
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: {
                url: '${pageContext.request.contextPath}/api/activity-calendar',
                error: function() {
                    $('#script-warning').show();
                }
            },
            loading: function(bool) {
                $('#loading').toggle(bool);
            }
        });

    });

</script>
<style>
    body {
        margin: 0;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #script-warning {
        display: none;
        background: #eee;
        border-bottom: 1px solid #ddd;
        padding: 0 10px;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        font-size: 12px;
        color: red;
    }

    #loading {
        display: none;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    #calendar {
        max-width: 900px;
        margin: 40px auto;
        padding: 0 10px;
    }
    .fc-button-group, .fc button{
	display: block; 
}

</style>
	<div class="main-content" style="height:1200px;">
<div class="contain-top" style="width:600px;height:auto">
<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home1" data-toggle="tab">
           本月日程
        </a>
    </li>

</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home1">
      <div class="calendar">

<div id='script-warning'>
    <code>日程获取失败！</code>
</div>

<div id='loading'>loading...</div>
<div id='calendar'></div>
</div>
</div>
</div> 
</div> 
<div class="contain-top" style="width:1200px;height:auto">
    <ul id="myTab1" class="nav nav-tabs">
        <li class="active">
            <a href="#home" data-toggle="tab">公告</a>
        </li>
    </ul>
    <div id="myTabContent1" class="tab-content">
        <div class="tab-pane fade in active" id="home">
           			<div class="row">
				<div class="col-xs-10">
					<div class="box">
						<div class="box-content no-padding">
							<table
								class="table table-bordered table-striped table-hover table-heading table-datatable"
								id="datatable-1">
								<thead>
									<tr>
										<th>序号</th>
										<th>标题</th>
										<th>内容</th>
										<th>创建者</th>
										<th>发布部门</th>
										<th>发布时间</th>
										<th>详情</th>
									</tr>
								</thead>
								<tbody><%int s =0; %>
									<c:forEach var="paper" items="${paperlist}">
										<%s++; %>
										<tr>
										<td><%=s %></td>
										<td>${paper.title}</td>
										<td>${paper.content}</td>
										<td>${paper.creator}</td>
										<td>${paper.department}</td>
										<td>${paper.createTime}</td>
										<td><a href="paperList">详情</a></td>
									</tr>
									</c:forEach>															
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
        </div>
    </div>
</div>
<div class="contain-top" style="width:1200px;height:auto;display:block">
    <ul id="myTab2" class="nav nav-tabs">
        <li class="active">
            <a href="#home2" data-toggle="tab">未读邮件</a>
        </li>
        <li><a href="#ios2" data-toggle="tab"></a></li>
    </ul>
    <div id="myTabContent2" class="tab-content">
        <div class="tab-pane fade in active" id="home2">
                       			<div class="row">
				<div class="col-xs-10">
					<div class="box">
						<div class="box-content no-padding">
							<table
								class="table table-bordered table-striped table-hover table-heading table-datatable"
								id="datatable-2">
								<thead>
									<tr>
										<th>序号</th>
										<th>标题</th>
										<th>内容</th>
										<th>创建者</th>
										<th>接收时间</th>
										<th>详情</th>
									</tr>
								</thead>
								<tbody><%int d =0; %>
									<c:forEach var="message" items="${messageUnread}">
										<%d++; %>
										<tr>
										<td><%=d %></td>
										<td>${message.title}</td>
										<td>${message.content}</td>
										<td>
										<c:forEach var="emp" items="${employee }">
										<c:if test="${message.creatorId==emp.id}">${emp.name}</c:if>
										</c:forEach>
										</td>
										<td>${message.sendTime}</td>
										<td><a href="messagedetailunRead?id=${message.id }">详情</a></td>
									</tr>
									
									</c:forEach>															
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
        </div>
        <div class="tab-pane fade" id="ios2">
            <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
                TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
        </div>
        <div class="tab-pane fade" id="jmeter2">
            <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
        </div>
        <div class="tab-pane fade" id="ejb2">
            <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
            </p>
        </div>
    </div>
    <script>
        $(function () {
            $('#myTab2 a').click(function (e) {
                e.preventDefault()
                $(this).tab('show')
            })
        });
    </script>
</div>
</div>